import TableView from '@/components/Table'
import { GlobalStyle } from '@/styles/global'
import { ContentStyle, HeaderStyle, LayoutStyle, MainStyle } from '@/styles/main'
import AlarmDetailView from './components/detail'
import FilterView from './components/filter'
import { FilterContext } from './context'
import useIndexHook from './servers/indexServer'
import { StyledAlarm } from './styles/alarmStyle'
const Alarm = () => {
	const { ...useHook } = useIndexHook()
	return (
		<>
			<GlobalStyle />
			<FilterContext.Provider
				value={{
					filterData: useHook.filterData,
					setFilterData: useHook.setFilterData,
				}}
			>
				{useHook.showDetail ? (
					<AlarmDetailView
						moid={useHook.detailMoid}
						onBackClick={() => useHook.onBackClick()}
					></AlarmDetailView>
				) : (
					<MainStyle className="main-wrap">
						<StyledAlarm className="alarm-list-wrap">
							<LayoutStyle>
								<LayoutStyle>
									<HeaderStyle className="filter-wrap">
										<FilterView
											onFilterSearch={() => useHook.onFilterSearch()}
											selectRowIds={useHook.selectedRowIds}
										></FilterView>
									</HeaderStyle>
									<ContentStyle className="table-wrap">
										<TableView
											selectedRowIds={useHook.selectedRowIds}
											needCheckbox={false}
											rowKey={useHook.rowKey}
											pager={{
												page: useHook.params.page,
												size: useHook.params.size,
												total: useHook.total,
											}}
											tableDataList={useHook.data}
											columns={useHook.columns}
											onRowClick={(
												e: any,
												rowData: any,
												id: string,
												nextSelected: any,
												index: any
											) => {
												useHook.onRowClick(e, rowData, id, nextSelected, index)
											}}
											onPageChange={(pageIndex: number, pageSize: number) =>
												useHook.onPageChange(pageIndex, pageSize)
											}
										/>
									</ContentStyle>
								</LayoutStyle>
							</LayoutStyle>
						</StyledAlarm>
					</MainStyle>
				)}
			</FilterContext.Provider>
		</>
	)
}
export default Alarm
